<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超分重建API接口平台</title>
    <link rel="stylesheet" href="../styles/show.css">
</head>

<body>
    <div id="app">
        <header class="header">
            <h1>基于多视点的成分辨率重建模块</h1>
            <h2>API接口展示</h2>
        </header>
        <div class="model-container">
            <!-- 使用v-for循环渲染模型卡片 -->
            <div class="api-model" v-for="(model, index) in models" :key="index">
                <h3>{{ model.title }}</h3>
                <p>{{ model.description }}</p>

                <div class="params">
                    <p><strong>输入参数：</strong></p>
                    <ul>
                        <li v-for="(input, i) in model.inputs" :key="'input'+i">{{ input }}</li>
                    </ul>
                    <p><strong>输出结果：</strong></p>
                    <ul>
                        <li v-for="(output, j) in model.outputs" :key="'output'+j">{{ output }}</li>
                    </ul>
                </div>

                <!-- 绑定点击事件 -->
                <button class="try-button" @click="navigateTo(model.url, index)" :disabled="isLoading[index]">
                    <span v-if="isLoading[index]" class="loader"></span>
                    {{ isLoading[index] ? '跳转中...' : '立即试用' }}
                </button>
            </div>
        </div>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="../scripts/show.js"></script>
</body>

</html>